import React from 'react';
import styles from './index.css';
import returnReason from './returnReason';
import returnState from './returnState';
import returnOrders from './returnOrders';
import returnProductAnalysis from './returnProductAnalysis';
import { Spin, Empty } from 'antd';
class ChartPanel extends React.Component {
  chartContainer = null;
  unmount = false;
  state = {
    loading: false,
    isEmpty: false,
    value: '--'
  };
  componentWillUnmount() {
    this.unmount = true;
  }
  toggleLoading(loading) {
    if (this.unmount) return;
    this.setState({
      loading
    });
  }
  toggleIsEmpty(isEmpty) {
    if (this.unmount) return;
    this.setState({
      isEmpty
    });
  }
  getChartContainer() {
    return this.chartContainer;
  }
  setValue(value) {
    this.setState({ value });
  }
  getContent() {
    const { value } = this.state;
    const { showValue, unit } = this.props;
    if (showValue) {
      return (
        <span>
          {value} {unit}
        </span>
      );
    } else {
      return null;
    }
  }
  render() {
    const { loading, isEmpty } = this.state;
    const { style, title, showValue } = this.props;
    return (
      <div className={styles.panel} style={style}>
        <div className={styles.panelTitle}>{title}</div>
        <div
          className={[styles.panelContent, showValue ? styles.panelValue : ''].join(' ')}
          ref={el => {
            this.chartContainer = el;
          }}
        >
          {this.getContent()}
        </div>
        {loading ? (
          <div className={styles.panelState}>
            <Spin />
          </div>
        ) : null}
        {!loading && isEmpty ? (
          <div className={styles.panelState}>
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
          </div>
        ) : null}
      </div>
    );
  }
}

class IndexPage extends React.Component {
  async componentDidMount() {
    await returnReason(this.returnReason);
    await returnState(this.returnRegion);
    await returnOrders({
      toBeRefunded: this.toBeRefunded,
      paid: this.paid,
      numberOfGoodsTaken: this.numberOfGoodsTaken,
      toBePickUp: this.toBePickUp,
      totalReturnOrders: this.totalReturnOrders
    });
    await returnProductAnalysis(this.returnProductAnalysis);
  }
  render() {
    return (
      <div>
        <h2>Main dashboard</h2>
        <div className={[styles.container, 'clearfix'].join(' ')} style={{ marginBottom: 0 }}>
          <ChartPanel
            style={{ width: 230 }}
            title="Return reason"
            ref={el => {
              this.returnReason = el;
            }}
          />
          <ChartPanel
            title="Return region"
            ref={el => {
              this.returnRegion = el;
            }}
          />
          <ChartPanel
            style={{ width: 230 }}
            title="To be refunded"
            showValue={true}
            unit={'orders'}
            ref={el => {
              this.toBeRefunded = el;
            }}
          ></ChartPanel>
          <ChartPanel
            style={{ width: 230 }}
            title="Paid"
            showValue={true}
            unit={'orders'}
            ref={el => {
              this.paid = el;
            }}
          ></ChartPanel>
          <ChartPanel
            style={{ width: 230 }}
            title="Number of goods taken"
            showValue={true}
            unit={'orders'}
            ref={el => {
              this.numberOfGoodsTaken = el;
            }}
          ></ChartPanel>
          <ChartPanel
            style={{ width: 230 }}
            title="To be picked up "
            showValue={true}
            unit={'orders'}
            ref={el => {
              this.toBePickUp = el;
            }}
          ></ChartPanel>
          <ChartPanel
            style={{ width: 230 }}
            title="Total return orders"
            showValue={true}
            unit={'orders'}
            ref={el => {
              this.totalReturnOrders = el;
            }}
          />
        </div>
        <div className={[styles.container, 'clearfix'].join(' ')}>
          <ChartPanel
            style={{ width: 600, height: 380 }}
            title="Return Analysis"
            ref={el => {
              this.returnProductAnalysis = el;
            }}
          />
        </div>
      </div>
    );
  }
}
export default IndexPage;
